<template>
  <div class="line-wrap" :style="{ width: width, height: height }">
    <div class="date_select">
      <span class="dateTime_span" v-for="item in datetimes" :key="item.id">{{
        item.time
      }}</span>
    </div>
    <div class="line" ref="line"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    // toggleIndex: 0,   //  默认legend切换索引
    legend: {
      type: Array,
      default: () => ["db.memorry.total", "db.memorry.used", "db.memorry.free"],
    },
    xAxis: {
      type: Array,
      default: () => [
        "10:44:40",
        "10:46:50",
        "10:49:50",
        "10:51:10",
        "10:51:50",
        "10:53:20",
        "10:55:30",
        "10:57:40",
        "10:59:50",
        "11:02:00",
      ],
    },
    value: {
      type: Array,
      default: () => [
        [10, 16, 13, 19, 5, 22, 11, 23, 14, 21],
        [4, 22, 5, 13, 14, 27, 14, 16, 10, 26],
        [8, 14, 9, 20, 10, 20, 27, 24, 25, 20],
      ],
    },
    // colors: {
    //   type: Array,
    //   default: () => [
    //     "#4DEAF7",
    //     "#1B35BF",
    //     "#829A1B",
    //     "#3EE9F7",
    //     "#FF9636 ",
    //     "#FF6C6C",
    //     "#00B091",
    //   ],
    // },
  },
  data() {
    return {
      option: null,
      chart: null,
      active: 0,
      datetimes: [
        {
          id: 1,
          time: "30分钟",
        },
        {
          id: 2,
          time: "1小时",
        },
        {
          id: 3,
          time: "2小时",
        },
        {
          id: 4,
          time: "6小时",
        },
        {
          id: 5,
          time: "12小时",
        },
        {
          id: 6,
          time: "1天",
        },
      ],
      // color: [
      //   "#4DEAF7",
      //   "#1B35BF",
      //   "#829A1B",
      //   "#3EE9F7",
      //   "#FF9636 ",
      //   "#FF6C6C",
      //   "#00B091",
      // ],
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  // created() {
  //   this.getColor();
  // },
  methods: {
    //随机生成颜色
    // getColor() {
    //   this.colors.map((item) => {
    //     console.log(item);
    //   });
    // },
    setOptions() {
      this.option = {
        grid: {
          left: "0%",
          right: "6%",
          bottom: "8%",
          top: "15%",
          containLabel: true,
        },
        // color: ["#4DEAF7", "#1B35BF", "#829A1B"],
        legend: {
          data: this.legend,
          padding: [5, 10],
          width: 400,
          itemWidth: 20,
          itemHeight: 8,
          itemGap: 5,
          textStyle: {
            fontSize: "10",
            fontFamily: "Source Han Sans CN",
            fontWeight: "400",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: "8",
              },
            },
            boundaryGap: false,
            data: this.xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            min: 0,
            max: 27.9,
            interval: 4.65,
            axisLabel: {
              textStyle: {
                fontSize: "8",
              },
              formatter: function (value, index) {
                if (value == 0) {
                  return value + "B";
                }
                return value + "GB";
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: this.legend.map((item, index) => {
          return {
            name: item,
            type: "line",
            // color: this.color[index],
            data: this.value[index],
          };
        }),
      };
      this.chartline.setOption(this.option);
    },
  },
  mounted() {
    this.chartline = echarts.init(this.$refs.line);
    this.setOptions();
    window.addEventListener("resize", () => {
      this.chartline.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.line-wrap {
  width: 100%;
  position: relative;
  .date_select {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    padding-bottom: 10px;
    .dateTime_span {
      cursor: pointer;
      display: inline-block;
      margin: 0px 4px;
      height: 20px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 20px;
      color: #36aaff;
    }
  }
}
.line {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>
